<template>
  <div class="state">
    <div>
      <!-- 面包屑导航 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">
          <i class="el-icon-s-home"></i>
          首页
        </el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/point/shoplist' }">
          <i class="el-icon-chat-line-round"></i>
          积分商城
        </el-breadcrumb-item>
        <!-- 当前 -->
        <el-breadcrumb-item>状态管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div v-if="Hidd" class="content">
      <div class="header-filter">
        <ul style="list-style: none;display: flex;">
          <li @click="changeI(item, index)" v-for="(item, index) in list" :class="i == index ? 'ul-li2' : 'ul-li'">{{ item
          }}</li>
        </ul>
      </div>
      <div class="con-table">
        <div v-for="(item, index) in list2" style="width: 100%;height: 180px;">
          <div style="width: 100%;background-color: #f5f5f5;padding: 10px 0;border: 1px solid #dedede;">
            <span
              style="border: 2px solid rgb(0, 136, 255);color:rgb(0, 136, 255);padding: 3px 15px;margin-left: 20px;">{{
                item.type }}</span>
            <span style="margin-left: 20px;font-size: 12px;font-weight: bold;">{{ item.date }}</span>
            <span style="margin-left: 20px;color: #969696;font-size: 12px;">订单编号：{{ item.code2 }}</span>
          </div>
          <div style="width: 100%;padding: 20px 0;display: flex;">
            <div style="height:100px;display: flex;padding-right: 150px;">
              <img style="width: 50px;height: 50px;" :src="item.img" alt="">
              <span style="color:rgb(0, 136, 255);line-height: 50px;text-indent: 10px;">{{ item.shop }}</span>
            </div>
            <div style="line-height: 50px;padding-right: 120px;">
              {{ item.user }}
            </div>
            <div style="line-height: 50px;padding-right: 80px;">
              {{ item.method + '/' + item.method2 }}
            </div>
            <div style="line-height: 50px;padding-right: 120px;">
              {{ item.price + '积分' }}
            </div>
            <div @click="toDetail(item)" style="color: rgb(0, 136, 255);line-height: 50px;padding-right: 100px;">
              查看详情
            </div>
            <div style="line-height: 50px;">
              <div style="display: flex;">
                <span style="color: rgb(0, 136, 255);">{{ item.state }}<span
                    style="margin-left: 5px;background-color: rgb(0, 136, 255);color: #fff;padding: 5px 10px;border-radius: 10px;"
                    v-if="item.state == '待发货'" @click="yes2(item)">确认收货</span></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="!Hidd" class="detail">
      <div>
        <i @click="changeHidd" class="el-icon-arrow-left" style="font-weight: bold;font-size: 20px;"></i>
      </div>
      <div class="detail-header">
        <el-steps v-if="detail.state != '已关闭'" :active="active" finish-status="success">
          <el-step title="买家下单"></el-step>
          <el-step title="买家付款"></el-step>
          <el-step title="商家发货"></el-step>
          <el-step title="订单完成"></el-step>
        </el-steps>
      </div>
      <div class="detail-con">
        <div class="con1">
          <ul style="list-style: none;font-size: 12px;color: #818181;text-indent: 20px;">
            <li style="margin-bottom: 5px;">订单编号：{{ detail.code2 }}</li>
            <li style="margin-bottom: 5px;">订单编号：{{ detail.code }}</li>
            <li style="margin-bottom: 5px;">付款方式：{{ detail.method }}</li>
            <li style="margin-bottom: 5px;">买家：<span style="color: rgb(43, 160, 243);">{{ detail.phone }}</span></li>
            <li style="margin-bottom: 5px;">配送方式：{{ detail.method2 }}</li>
            <li style="margin-bottom: 5px;">收货人：{{ detail.site + detail.phone }}<span
                style="color: rgb(43, 160, 243);">复制</span></li>
            <li><el-button type="primary" size="mini">修改订单信息</el-button></li>
          </ul>
        </div>
        <div class="con2">
          <ul style="list-style: none;font-size: 12px;color: #818181;text-indent: 20px;">
            <li v-if="detail.state == '待发货'">订单状态： <span
                style="font-size: 20px;font-weight: bold;color: rgb(255, 213, 0);">{{ detail.state
                }}</span><span style="margin-left: 10px;">(买家已付款，请商家尽快发货)</span></li>
            <li v-if="detail.state == '已发货'">订单状态： <span
                style="font-size: 20px;font-weight: bold;color: rgb(255, 213, 0);">待收货</span>
              <span style="margin-left: 10px;">(商家已发货，等待买家收货并交易完成)</span>
            </li>
            <li v-if="detail.state == '已收货'">订单状态： <span
                style="font-size: 20px;font-weight: bold;color: #67C23A;">交易完毕</span>
            </li>
            <li v-if="detail.state == '已关闭'">订单状态： <span
                style="font-size: 20px;font-weight: bold;color: black;">已关闭</span>
            </li>
            <li><el-button @click="yes" type="primary" size="mini" v-if="detail.state == '待发货'">确认发货</el-button></li>
          </ul>
        </div>
      </div>
      <div style="width: 90%;margin: 0 auto;font-weight: bold;">
        商品信息
      </div>
      <div class="detail-shop">
        <ul class="shop-ul">
          <li style="padding-right: 100px;padding-left: 10px;">商品标题</li>
          <li style="padding-right: 100px;">规格、编号、条码</li>
          <li style="padding-right: 100px;">单价</li>
          <li style="padding-right: 100px;">数量</li>
          <li style="padding-right: 100px;">原价</li>
          <li style="padding-right: 100px;text-align: right;">状态</li>
        </ul>
        <ul class="shop-ul2">
          <li style="padding-right: 100px;padding-left: 10px;display: flex;border-right: 1px solid #e6e6e6;">
            <img :src="detail.img" style="width: 50px;" alt="">
            <span style="line-height: 50px;">{{ detail.shop }}</span>
          </li>
          <li style="padding-right: 100px;border-right: 1px solid #e6e6e6;line-height: 50px;">
            <ul style="list-style: none;line-height: 20px;font-size: 12px;color: #ccc;margin-left: 10px;">
              <li>规格：无</li>
              <li>编码：无</li>
              <li>条码：无</li>
            </ul>
          </li>
          <li style="padding-right: 100px;border-right: 1px solid #e6e6e6;line-height: 50px;text-align: ;">{{detail.price+'积分'}}</li>
          <li style="padding-right: 100px;border-right: 1px solid #e6e6e6;line-height: 50px;">{{detail.num+'个'}}</li>
          <li style="padding-right: 100px;border-right: 1px solid #e6e6e6;line-height: 50px;">{{detail.price+'积分'}}</li>
          <li style="padding-right: 100px;line-height: 50px;text-align: right;border-right: 1px solid #e6e6e6;">{{ detail.state=='已发货'||detail.state=='待发货'? '已付款':detail.state}}</li>
        </ul>
        <ul style="width: 100%;text-align: right;font-size: 14px;color: #7d7d7d;list-style: none;">
          <li>商品小计：{{ detail.price+'积分' }}</li>
          <li>运费：￥0.00</li>
          <li>实付款：{{ detail.price+'积分' }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { getJiFenStateDjm, putJiFenStateDjm } from '../../utils/api'
export default {
  data() {
    return {
      list: ['全部状态', '已发货', '已付款', '已收货', '已关闭'],
      i: 0,
      list2: [],
      list3: [],
      Hidd: true,
      active: 2,
      detail: {}
    }
  },
  created() {
    this.render()
  },
  methods: {
    yes2(item) {
      putJiFenStateDjm({ id: item.id, state: '已发货' }).then(res => {
        this.render()
      })
    },
    toDetail(item) {
      this.Hidd = !this.Hidd
      this.detail = item
      if (item.state == '已发货') {
        this.active = 3
      } else if (item.state == '已收货') {
        this.active = 4
      }
    },
    yes() {
      putJiFenStateDjm({ id: this.detail.id, state: '已发货' }).then(res => {
        this.Hidd = !this.Hidd
        this.render()
      })
    },
    changeHidd() {
      this.Hidd = !this.Hidd
    },
    render() {
      getJiFenStateDjm().then(res => {
        this.list2 = res.data.data
        this.list3 = [...this.list2]
      })
    },
    changeI(items, index) {
      this.i = index
      if(items=='已付款'){
        this.list2 = this.list3.filter(item => {
          if (item.state == '已发货'||item.state == '待发货') {
            return item
          }
        })
      }else{
        if (this.i != 0) {
        this.list2 = this.list3.filter(item => {
          if (item.state == items) {
            return item
          }
        })
      } else {
        this.list2 = this.list3
      }
      }

    },
  }
}
</script>
<style scoped>
.state {
  width: 100%;
}

.content {
  width: 100%;
  margin-top: 20px;
}

.header-filter {
  width: 400px;
}

.ul-li {
  flex: 1;
  /* margin-left: 10px; */
  border-bottom: 3px solid #ccc;
  text-align: center;
  padding: 10px 0;
}

.ul-li2 {
  flex: 1;
  /* margin-left: 10px; */
  border-bottom: 3px solid #0930a7;
  text-align: center;
  padding: 10px 0;
}

.con-table {
  width: 100%;
  margin-top: 20px;
}

.detail {
  width: 100%;
  margin-top: 20px;
}

.detail-header {
  width: 80%;
  margin: 0 auto;
}

.detail-con {
  width: 90%;
  margin: 20px auto;
  border: 1px solid #ccc;
  padding: 20px 0;
  display: flex;
}

.con1 {
  flex: 1;
  border-right: 1px solid #ccc;
}

.con2 {
  flex: 1;
}
.detail-shop{
  width: 90%;
  margin: 20px auto;
  border: 1px solid #e6e6e6;
  padding: 20px 0;
}
.shop-ul{
  width: 100%;
  list-style: none;
  display: flex;
}
.shop-ul2{
  width: 100%;
  list-style: none;
  display: flex;
  border: 1px solid #e6e6e6;
  padding: 10px 0;
  margin-top: 20px;
}
</style>